import echarts from 'echarts'
import '../../../public/static/theme/chalk'

// 初始化图表
export const setEchartOptions = (ref, options) => {
  echarts.init(ref, 'chalk').setOption(options)
}

export const setEcharts = (ref, xAxisData = {}, seriesData = {}) => {
  // 颜色设置
  const colorStart = [
    'rgba(11, 168, 44, 0.5)',
    'rgba(44, 110, 155, 0.5)',
    'rgba(22, 242, 217, 0.5)',
    'rgba(254, 33, 30, 0.5)',
    'rgba(250, 105, 0, 0.5)'
  ]
  const colorEnd = [
    'rgba(11, 168, 44, 0)',
    'rgba(44, 110, 155, 0)',
    'rgba(22, 242, 217, 0)',
    'rgba(254, 33, 30, 0)',
    'rgba(250, 105, 0, 0)'
  ]
  // 数据的初始化，循环遍历
  const series = []
  // const legendData = []
  seriesData.map((item, index) => {
    // series数据的遍历
    const data = {
      type: 'line',
      name: item.name,
      data: item.data,
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: colorStart[index]
          },
          {
            offset: 1,
            color: colorEnd[index]
          }
        ])
      },
      stack: 'map'
    }
    // 循环遍历 legend data icon置为圆形
    // const legend = {
    //   icon: 'circle',
    //   name: item.name
    // }
    // legendData.push(legend)
    series.push(data)
  })
  setEchartOptions(ref, {
    grid: {
      top: '20%',
      left: '10%',
      bottom: '15%'
    },
    legend: {
      show: true,
      icon: 'circle',
      top: '15%',
      left: '10%',
      itemWidth: 20,
      itemHeight: 20,
      itemGap: 60
    },
    tooltip: {
      show: true
    },
    xAxis: {
      type: 'category',
      data: xAxisData,
      // x轴紧挨着y轴
      boundaryGap: false
    },
    yAxis: {
      type: 'value'
    },
    series: series
  })
}

// export const resizeCharts = (ref) => {
//   ref.resize()
// }
